﻿<template>
    <div id="app">
        <mt-header v-bind:title="title" style="background-color:#fda10e">
            <a slot="left" @click="back()"><i class="mintui mintui-back"></i></a>

        </mt-header>

        <div class="player">
            <video-player class="video-player vjs-custom-skin"
                          ref="videoPlayer"
                          :playsinline="true"
                          :options="playerOptions"
                          @play="onPlayerPlay($event)"
                          @pause="onPlayerPause($event)">
            </video-player>
        </div>

    </div>
</template>

<script>
    import Bus from '../bus.js';
    import { videoPlayer } from 'vue-video-player';

    export default {
        name: 'app',
        data() {
            return {
                title: '视频',
                timer: "",  // 定时器名称
                playerOptions: {
                    //        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
                    autoplay: false, //如果true,浏览器准备好时开始回放。
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false, // 导致视频一结束就重新开始。
                    preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                    language: 'zh-CN',
                    aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                    fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                    sources: [{
                        type: "application/x-mpegURL",
                        src: "" //你的m3u8地址（必填）
                    }],
                    poster: "poster.jpg", //你的封面地址
                    width: document.documentElement.clientWidth,
                    notSupportedMessage: '', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                    //        controlBar: {
                    //          timeDivider: true,
                    //          durationDisplay: true,
                    //          remainingTimeDisplay: false,
                    //          fullscreenToggle: true  //全屏按钮
                    //        }
                },


            }
        },
        components: {
            videoPlayer
        },
        mounted() {
            window.history.pushState('forward', null, '#');
            window.history.forward(1);
            window.onpopstate = () => {
            
                Bus.$emit('val', "hide");
                this.$router.go(-1);

            }
        },
        computed: {

            player() {
                return this.$refs.videoPlayer.player
            }
        },
        methods: {
            onPlayerPlay(player) {
                // alert("play");
            },
            onPlayerPause(player) {
                // alert("pause");
            },

            load: function () {
                var id = this.$route.params.id;
                console.log(this.$route.params);
                var _this = this;
                this.$api.post('wx/Index/getvideoinfo', {
                    "id": id
                }, response => {
                    if (response.status >= 200 && response.status < 300) {
                        console.log(response.data);
                        var data = response.data;
                        if (data.status == 200) {
                            _this.$data.info = data.data;

                            _this.$data.playerOptions.sources[0].src = data.data.rtmpurl;
                            console.log(_this.$data.playerOptions.sources[0].src);

                            _this.start();
                        }


                        //请求成功，response为成功信息参数
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            }

            ,
            back: function () {
              

                Bus.$emit('val', "show");
                this.$router.go(-1);
            },
            start: function () {
                var id = this.$route.params.id;
                var _this = this;

                this.$data.timer = setInterval(function () {
                    var userid = window.localStorage.getItem('userid');
                    var videoid = id;

                    _this.$api.post('wx/Index/useronline', {
                        "userid": userid, videoid: videoid
                    }, response => {
                        if (response.status >= 200 && response.status < 300) {

                        } else {
                            console.log(response.message);
                            //请求失败，response为失败信息
                        }
                    });
                }, 1000);


            }

        }
        ,
        created: function () {
            this.load();
            Bus.$emit('backshow', 1);
        },
        beforeDestroy() {            //清除定时器
            clearInterval(this.$data.timer);
            console.log("beforeDestroy");
        },
        destroyed() {            //清除定时器
            //clearInterval(this.timer);
            console.log("destroyed");
        }



    }
</script>

<style scoped>
    .video-js .vjs-big-play-button {
        /*
      播放按钮换成圆形
     */
        height: 2em;
        width: 2em;
        line-height: 2em;
        border-radius: 1em;
    }
</style>